<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>shapez.io shape generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="index.css" media="all" />
    <script async src="index.js"></script>
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/favicon.ico"
    />

    <!-- just include all variants for ease of use -->
    <link
      href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <a href="https://steam.shapez.io" target="_blank">
      <img id="logo" src="logo.png" />
    </a>
    <h1>图形预览</h1>

    <div class="grid">
      <div class="col">
        <input
          value="CuCuCuCu"
          id="code"
          placeholder="shape code"
          onkeypress="debounce(generate)"
          onkeydown="debounce(generate)"
          onkeyup="debounce(generate)"
          onchange="debounce(generate)"
        />
        <div id="error">错误</div>
        <br />

        <div id="resultWrapper">
          <canvas id="result" width="512" height="512"></canvas>
        </div>
        <button onclick="exportShape()">导出</button>
        <button onclick="shareShape()">分享</button>
      </div>
      <div class="col infoBox">
        <h2>关于</h2>

        <p>
          使用此工具，您可以生成shapez.io中支持的任何图形！这对于分析图形或绘制新图形非常有用。
        </p>

        <h3>说明</h3>

        <p>
          可以使用<strong>短代码</strong>生成图形。每个图形最多由4个层组成，每个层由4个象限组成。图形代码从右上象限顺时针读取。
        </p>
        <br />
        <p>
          每个象限都由一个<strong>大写字母描述形状</strong>，后跟一个<strong>小写字母描述颜色</strong>组成。如果象限为空，则使用<code>--</code>。
        </p>
        <br />
        <p>
          每层用<code>:</code>分割，最左侧是最底层。
        </p>

        <div class="grid shapeCodes">
          <div class="col">
            <h3>形状代码</h3>
            <ul>
              <li><code>C</code> 圆</li>
              <li><code>R</code> 矩形</li>
              <li><code>W</code> 风车/风扇</li>
              <li><code>S</code> 星星</li>
            </ul>
          </div>
          <div class="col">
            <h3>颜色代码</h3>
            <ul>
              <li>
                <code>r</code>
                <span class="colorPreview" style="background: #ff666a"></span>
                红色
              </li>
              <li>
                <code>g</code>
                <span class="colorPreview" style="background: #78ff66"></span>
                绿色
              </li>
              <li>
                <code>b</code>
                <span class="colorPreview" style="background: #66a7ff"></span>
                蓝色
              </li>

              <li>
                <code>y</code>
                <span class="colorPreview" style="background: #fcf52a"></span>
                黄色
              </li>

              <li>
                <code>p</code>
                <span class="colorPreview" style="background: #dd66ff"></span>
                紫色
              </li>

              <li>
                <code>c</code>
                <span class="colorPreview" style="background: #00fcff"></span>
                青色
              </li>

              <li>
                <code>u</code>
                <span class="colorPreview" style="background: #aaaaaa"></span>
                未着色
              </li>

              <li>
                <code>w</code>
                <span class="colorPreview" style="background: #ffffff"></span>
                白色
              </li>
            </ul>
          </div>
        </div>

        <h3>示例</h3>

        <script>
          const examples = [
            ["CwCwCwCw", "白色原型"],
            ["----RuRu", "半矩形"],
            ["CgScScCg", "混合圆和星形状"],
            ["RpRpRpRp:CwCwCwCw", "演示层结构"],
          ];
          for (let i = 0; i < examples.length; ++i) {
            const [key, desc] = examples[i];
            document.write(`
                <div class="example">
                    <code>${key}</code><label>${desc}</label>
                    <button onclick='viewShape(\"${key}\")'>View</button>
                    </div>
            `);
          }
        </script>
        <div class="example">
          <code></code><label>随机图形</label>
          <button onclick="randomShape()">随机</button>
        </div>
      </div>
    </div>

    <div class="footer">
      <a
        target="_blank"
        href="https://github.com/tobspr/shapez.io"
        target="_blank"
        >Github</a
      >
    </div>
  </body>
</html>
